<template>
  <div>
    <p>
      <label>username</label>
      <input type="text" v-model="username">
    </p>
    <p>
      <label>phone</label>
      <input type="text" v-model="phone">
    </p>
    <p>
      <label>email</label>
      <input type="text" v-model="email">
    </p>
  </div>
</template>
<script setup>
import { watch } from 'vue';

const [username, usernameModifiers] = defineModel({
  set(value) {
    if (usernameModifiers.capitalize) {
      return value[0].toUpperCase() + value.slice(1);
    }
  }
});
/* watch(username, () => {
  if (usernameModifiers.capitalize) {
    username.value = username.value[0].toUpperCase() + username.value.slice(1);
  }
}, {
  immediate: true
}) */


const [phone, phoneModifiers] = defineModel('phone', { required: true });

const email = defineModel('email', { required: true });

</script>